<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list{
            width:200px;
            height: 150px;
            background-color: skyblue;
            overflow: auto;
        }
        .news{
            height: 30px;
        }
    </style>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test">
    </div>
</body>
<!-- 引入依赖 引入的时候，必须就按照这个步骤-->
<script src="../React-js/17.0/react.development17.0.js" type = "text/javascript"></script>
<script src="../React-js/17.0/react-dom.development17.0.js" type = "text/javascript"></script>
<script src="../React-js/babel.min.js" type="text/javascript"></script>


<script type="text/babel">
    class NewsList extends React.Component{
        state={newsArr:[]}
        componentDidMount(){
            setInterval(() => {
                const {newsArr} = this.state
                const news = '新闻'+(newsArr.length+1)
                this.setState({newsArr:[news,...newsArr]})
            }, 1000);
        }
        getSnapshotBeforeUpdate(){
            return this.refs.list.scrollHeight
        }
        componentDidUpdate(preProps,preState,height){
            this.refs.list.scrollTop += this.refs.list.scrollHeight-height
        }
        render(){
            return(
                <div className="list" ref = "list">
                    {
                        this.state.newsArr.map((n,index)=>{
                            return <div key={index} className="news">{n}</div>
                        })
                    }    
                </div>
            )
        }
    }

    ReactDOM.render(<NewsList/>,document.getElementById("test"))
</script>
</html>